<template>
  <div class="material-footer">
    <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <el-button plain size="mini" @click="handleDelete">批量删除</el-button>
    <el-button plain size="mini" @click="handleMove" v-if="recycle == 0">移动到</el-button>
    <el-divider direction="vertical"></el-divider>
    <el-button plain size="mini" icon="edu-icon-xingzhuang el-icon--left" @click="handleRecycle"
      >回收站</el-button
    >
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="paginate.currentPage"
      :page-size="paginate.listRows"
      :hide-on-single-page="paginate.hidePage"
      layout="total, prev, pager, next"
      :total="paginate.total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    checkAll: Boolean,
    indeterminate: Boolean,
    recycle: Number
  },
  computed: {
    ...mapState('paginate', {
      paginate: 'paginate'
    })
  },
  methods: {
    handleCurrentChange(val) {
      // 更新当前加载的页数
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: val
      })
      window.scrollTo(0, 0)
      this.$emit('handleCurrentChange', val)
    },
    // 全选
    handleCheckAllChange(val) {
      this.$emit('update:checkAll', val)
      this.$emit('select', val)
    },
    // 删除
    handleDelete() {
      this.$emit('delete')
    },
    // 移动
    handleMove() {
      this.$emit('move')
    },
    // 回收站
    handleRecycle() {
      this.$emit('recycle')
    }
  }
}
</script>

<style lang="scss" scoped>
.material-footer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  .pagination {
    margin-left: auto;
  }
  .el-divider {
    margin: 0 30px;
  }
  .el-checkbox {
    margin-right: 24px;
  }
  .el-button + .el-button {
    margin-left: 20px;
  }
}
</style>
